<template>
  <div id="root">
   <Top><p class="top-p">{{foods.name}}</p></Top>
    <div class="img"><img :src="'https://elm.cangdu.org/img/'+foods.image_path" alt=""></div>
    <div class="content">
    <p>{{foods.name}}</p>
<!--    <p>6666666666</p>-->
    <p> 评分<el-rate
        v-model="foods.rating"
        disabled
        show-score
        text-color="#ff9900"
        score-template="{value}">
    </el-rate></p>
    <p> 月销售{{foods.month_sales}} <span class="qian">售价Y{{foods.specfoods[0].price}}起</span></p>
    <p>评论数{{foods.rating_count}}好评率{{haoping}}%</p>
    </div>
  </div>
</template>

<script>
import Top from "@/components/Top";
export default {
name: "xiangqing",
  components: {Top},
  created() {
 this.foods= this.$store.state.foods;
 console.log(this.foods);
  },
  data() {
    return {
      foods:'',
    }
  },
  computed: {
    haoping() {
      return Math.floor((this.foods.satisfy_count/this.foods.satisfy_rate)) ;
    }
  },
}
</script>

<style scoped>
#root{
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #666666;
  top: 0;
  z-index: 999;
}
.top-p{
  width: 100%;
}
.img{
  width: 100%;
  height: 320px;
  background-color: white;
}
.img img{
  width: 100%;
  //width: 100%;
  height: 100%;
}
.content p{
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-left: 10px;

}
.content p:nth-child(1){
  font-size: 1.3rem;
  color: #333;
  margin-bottom: .2rem;
}
.qian{
  font-size: 1rem;
  color: #f60;
  margin-right: .2rem;
}
.root{
  height: 100%;
  width: 100%;
}
/deep/.el-rate__icon{
  font-size: 5px;
  margin: 0;
}
</style>